<template>
  <div class="new-add">
    <div>{{ $t('km.title') }}</div>
    <el-input size="mini" value="" v-model.trim="input" class="title-input"> </el-input>
    <editor-public :KmType="KmType" ref="editPublic"> </editor-public>
    <!--<quillPublic -->
    <!--:editdata="editdata"-->
    <!--@submitContent="submitContent"-->
    <!--@kmFile="kmFile"-->
    <!--:KmType="KmType"-->
    <!--ref="editPublic">-->
    <!--</quillPublic>-->
    <knowledgeLabel @change="labelChange"></knowledgeLabel>
    <div class="button">
      <el-button @click.stop="cancel" class="primary_btn">{{ $t('public.cancel') }}</el-button>
      <el-button @click.stop="preview" class="primary_btn">{{ $t('km.preview') }}</el-button>
      <el-button type="primary" class="primary_btn" @click.stop="submit">{{ $t('km.submit') }}</el-button>
    </div>
  </div>
</template>
<script>
import EditorPublic from '@/components/business-modules/km/km-detail/EditorPublic.vue'
import knowledgeLabel from './knowledgeLabel.vue'
import { getFormatDateTime } from '@/utils/m7Utils'
export default {
  name: 'kmNewAdd',
  props: ['KmType'],
  data() {
    return {
      input: '',
      subContent: {},
      attachs: {},
      editdata: [],
      tagList: []
    }
  },
  methods: {
    // 预览
    preview() {
      this.$refs.editPublic.preview()
    },
    cancel() {
      this.input = ''
      this.subContent = {}
      this.$emit('cancel')
    },
    // 点击发布
    submit() {
      const checkObj = this.$refs.editPublic.checkForm()
      if (!checkObj.status) {
        // 必填校验
        return
      } else if (checkObj.status && !checkObj.customTime) {
        return this.$message.error(this.$t('km.knowledgeValidityTip2'))
      }
      let route = this.$route.params
      if (this.input === '') {
        this.$message.error(this.$t('km.titleNotEmpty'))
        return
      }
      // 获取附件和富文本内容
      let form = this.$refs.editPublic.submitContent()
      let contentNew = form.content.content
        ? form.content.content.replace('<p>', '').replace('</p>', '').replace('<br>', '')
        : ''
      if (!contentNew) {
        this.$message.error(this.$t('km.contentNotEmpty'))
        return
      }
      let data = {
        title: this.input,
        content: form.content.content,
        kmType: route.kmType,
        fileId: form.content.fileId,
        attachs: form.attachs,
        cid: route.kmId || '',
        tagList: this.tagList,
        validityPeriodType: form.validityPeriodType
      }
      if (form.validityPeriodType === 'custom') {
        // 有效期自定义
        data.validityPeriod = [getFormatDateTime(form.validityPeriod[0]), getFormatDateTime(form.validityPeriod[1])]
      }
      this.$store.dispatch('saveItem', data).then((rep) => {
        if (rep.success) {
          this.$emit('addKm')
          this.$message.success(this.$t('km.issueSuccess'))
        } else {
          this.$message.error(this.$t('km.issueFail'))
        }
      })
    },
    // 富文本编辑器的内容
    submitContent(submitContent) {
      this.subContent = submitContent
    },
    // 上传附件
    kmFile(kmFile) {
      let attach = {}
      for (let i = 0; i < kmFile.length; i++) {
        let id = kmFile[i].id.split('.')[2]
        let key = ''
        let split = id.split('/')
        for (let i = 1; i <= split.length - 1; i++) {
          if (i < split.length - 1) {
            key += split[i] + '/'
          } else {
            key += split[i]
          }
        }
        attach[key] = kmFile[i].name
      }
      this.attachs = attach
    },
    labelChange(ids) {
      this.tagList = ids
    }
  },
  components: {
    EditorPublic,
    knowledgeLabel
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common.styl";
.new-add
  color $cf-gray1
  .title-input
    width 390px
    margin 7px 0 20px
    input
      color #252525
  .button
    margin-bottom 100px
    text-align right
    .cancel, .submit
      background-color $c-sub
      width 90px
      color $cf-white
      margin-right 20px
    .submit
      background-color $c-main
      margin-right 0
.close
  display none
.open
  display block
</style>
